<div id="product-dialog" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">เพิ่มรายการสินค้า</h4>
      </div>
      <div class="modal-body">
        <div class="product-type-list-wrapper">
          <ul class="product-type-list">
          {% for product_type in product_types %}
            <li><a href="#" product-type-id="{{ product_type.pk }}" style="background:{{ product_type.color_hex }};">{{ product_type }}</a></li>
          {% endfor %}
            <li><a href="#" product-type-id="basket">ตระกร้า</a></li>
          </ul>
        </div>

        <div class="product-list-wrapper">
          <ul class="product-list">
            {% include 'ipad/include/product-list.html' %}
          </ul>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="hide">
  <div class="quantity-price-dialog">
    <div class="form-field">
      <label>จำนวน</label>
      <input type="number" name="quantity" class="form-control" min="1">
    </div>
    <div class="form-field">
      <label>ราคา</label>
      <input type="number" name="price" class="form-control">
    </div>
  </div>

  <div class="quantity-dialog">
    <label>จำนวน</label>
    <input type="number" name="quantity" class="form-control" min="1">
  </div>

  <div class="unit-dialog">
    <label>หน่วย</label>
    <input type="number" name="unit" class="form-control">
  </div>

  <div class="price-dialog">
    <label>ราคา</label>
    <input type="number" name="price" class="form-control">
  </div>

  <div class="payment-dialog">
    <p class="outstanding-wrapper">ยอดค้างชำระ: <span class="outstanding"></span></p>
    <p>รวม: <span class="summary"></span></p>
    <p>ชิ้น: <span class="quantity"></span></p>
    <label>รับชำระจำนวน</label>
    <input type="number" name="payment" class="form-control">
  </div>
</div>